/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div>
    <el-form :model="Form" ref="addForm" label-width="100px" class="demo-ruleForm">
      <el-form-item :label="$t('openatc.greenwaveoptimize.routename')" prop="oldPass">
          <el-input type="text" auto-complete="off" :placeholder="$t('openatc.greenwaveoptimize.routename')" v-model="Form.name"></el-input>
      </el-form-item>
      <el-form-item :label="$t('openatc.greenwaveoptimize.routeCros')" prop="oldPass">
          <el-button icon="el-icon-plus" type="text" @click="onAddClick">{{$t('openatc.greenwaveoptimize.adddevice')}}</el-button>
      </el-form-item>
      <el-form-item prop="oldPass">
        <div class="devs-table">
          <el-table
            ref="multipleTable"
            :data="list"
            size="mini"
            :max-height="tableHeight"
            style="width: 100%"
            id="footerBtn">
            <el-table-column
              type="index"
              label="#"
              align="center"
              width="40">
            </el-table-column>
            <el-table-column
              prop="agentid"
              :label="$t('openatc.devicemanager.crossid')"
              align="center"
              width="100">
            </el-table-column>
            <el-table-column
              prop="name"
              :label="$t('openatc.devicemanager.devicename')"
              align="center"
              width="100">
            </el-table-column>
            <el-table-column
              prop="type"
              :label="$t('openatc.devicemanager.type')"
              align="center"
              width="50">
            </el-table-column>
            <el-table-column
              prop="jsonparam.ip"
              :label="$t('openatc.devicemanager.IP')"
              width="110"
              align="center">
            </el-table-column>
            <el-table-column
              prop="jsonparam.port"
              :label="$t('openatc.devicemanager.port')"
              align="center"
              width="60">
            </el-table-column>
            <el-table-column
              prop="descs"
              :label="$t('openatc.devicemanager.describe')"
              align="center">
            </el-table-column>
            <el-table-column :label="$t('openatc.devicemanager.operation')" align="center" width="80">
              <template slot-scope="scope">
                <el-button type="text" @click="handleDelete(scope.$index)">{{$t('openatc.common.delete')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="display:flex;justify-content:end;">
      <el-button type="primary" @click="onNextClick()">{{$t('openatc.common.nextStep')}}</el-button>
    </div>
    <ChoseIntersection ref="choseIntersection" @onSureClick="onSureClick"></ChoseIntersection>
  </div>
</template>

<script>
import ChoseIntersection from '../../../components/ChoseIntersection'
export default {
  name: 'editRouteDevice',
  components: { ChoseIntersection },
  props: {
    route: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      step: 1,
      tableHeight: 450,
      list: [],
      Form: {
        name: ''
      }
    }
  },
  mounted () {
    if (this.route.devs) {
      this.list = this.route.devs
      this.Form.name = this.route.name
    }
  },
  destroyed () {
    this.list = []
    this.Form.name = ''
  },
  methods: {
    close () {
      this.resetForm()
    },
    onAddClick () {
      let choseIntersection = this.$refs.choseIntersection
      choseIntersection.show()
    },
    onSureClick (devices) {
      let diffList = []
      for (let dev of devices) {
        let matchList = this.list.filter(item => item.agentid === dev.agentid)
        if (matchList.length === 0) {
          delete dev.id
          dev.patternid = 1
          diffList.push(dev)
        }
      }
      this.list = this.list.concat(diffList)
    },
    handleDelete (index) {
      this.$confirm(this.$t('openatc.common.sureToDelete'), this.$t('openatc.common.tipsmodaltitle', {
        confirmButtonText: this.$t('openatc.button.OK'),
        cancelButtonText: this.$t('openatc.button.Cancel'),
        type: 'warning'
      })).then(() => {
        this.list.splice(index, 1)
        this.$message({
          type: 'success',
          message: this.$t('openatc.common.deletesuccess')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('edge.common.deletecancel')
        })
      })
    },
    onNextClick () {
      if (this.Form.name === '') {
        this.$message.warning(this.$t('openatc.greenwaveoptimize.inputRouteName'))
        return false
      }
      if (this.list.length === 0) {
        this.$message.warning(this.$t('openatc.greenwaveoptimize.chooseCros'))
        return false
      }
      let res = {
        name: this.Form.name,
        list: this.list
      }
      this.$emit('onNextClick', res, this.step)
    },
    resetForm () {
      this.Form.name = ''
      this.list = []
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss">
</style>
